<template>
  <div class="search">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <el-form :label-width="lablewidth">
      <el-row>
        <template v-for="item in searchFormItems" :key="item.label">
          <el-col :span="cLayout.span">
            <el-form-item :label="item.label" :style="itemStyle">
              <!-- 遍历输入框 -->
              <template v-if="!item.elType">
                <el-input
                  :placeholder="item.placeholder"
                  size="small"
                  v-model="formDate[`${item.field}`]"
                ></el-input>
              </template>

              <!-- 遍历选择框 -->
              <template v-else-if="item.elType == 'select'">
                <el-select
                  size="small"
                  style="width: 100%"
                  :placeholder="item.placeholder"
                  v-model="formDate[`${item.field}`]"
                >
                  <el-option
                    v-for="item in item.options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>

              <!-- 遍历时间选择器 -->
              <template v-else-if="item.elType == 'picker'">
                <el-date-picker
                  style="width: 100%"
                  v-bind="item.otherOption"
                  size="small"
                  v-model="formDate[`${item.field}`]"
                ></el-date-picker>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Search, Refresh } from "@element-plus/icons-vue"
import { defineComponent, PropType, ref, watch } from "vue"
import { ISearchFormItem } from "@/types/userType"
export default defineComponent({
  props: {
    modelValue: {
      type: Object,
      required: false,
    },
    searchFormItems: {
      type: Array as PropType<ISearchFormItem[]>,
      default: () => [],
    },
    lablewidth: {
      type: String,
      default: "80px",
    },
    itemStyle: {
      type: Object,
      default: () => ({ padding: "10px 40px" }),
    },
    cLayout: {
      type: Object,
      default: () => ({
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      }),
    },
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    // 复制一份传过的
    const formDate = ref({ ...props.modelValue })

    // 监听数据变化,发出事件
    watch(
      formDate,
      (newValue) => {
        console.log("数据改变了")
        emit("update:modelValue", newValue)
      },
      {
        deep: true,
      },
    )
    return {
      Search,
      Refresh,
      formDate,
    }
  },
})
</script>
<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-input {
  width: 100%;
}

.search {
  padding-top: 20px;
  height: 100%;
}
</style>
